<template>
    <div class="startAds">
        <div class="navHead">
            <div class="left">
                <a href="javascript:;" @click="back">
                    <i class="el-icon-back"></i>
                    <span>返回</span>
                </a>

                <a href="javascript:;" class="on">
                    <i class="el-icon-s-opportunity"></i>
                    <span>启动广告</span>
                </a>

            </div>
            <div class="right">

                <a href="javascript:;" class="release" @click="saveBottomMenu">
                    <i class="el-icon-s-promotion"></i>
                    <span>保存</span>
                </a>
            </div>
        </div>
        <div class="body" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
            <div class="main">
                <div class="head">
                    <img :src="head_black" alt="" />
                    <img :src="head_black_r" alt="" class="head_black_r" />
                    <p class="title">首页</p>
                </div>
                <div class="section">
                    <img :src="menuSkeleton" alt="" />
                    <StartAdsMainComponent :controlData="control" ref="startAdsMainComponent"></StartAdsMainComponent>
                </div>
            </div>
            <div class="right">
                <div class="head">
                    <i :class="control.icon"></i>
                    <span>{{ control.title }}</span>
                </div>
                <div class="article">
                    <StartAdsRightComponent ref="right" :controlData="control"></StartAdsRightComponent>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import menuSkeleton from "@/static/images/menu-skeleton.png";
import head_black from "@/static/images/head_black.png";
import head_black_r from "@/static/images/head_black_r.png";
import menu_img from "@/static/images/menu_img.png";
import menu_img_active from "@/static/images/menu_img_active.png";
import adsImg from "@/static/images/adv.jpg";
import headApi from '@/utils/hade';
import { getToken } from "@/utils/auth";
export default {
    name: "startAds",
    data() {
        return {
            pageName: "设置启动广告页",
            menuSkeleton,
            head_black,
            head_black_r,
            menu_img,
            menu_img_active,
            control: {
                id: 1,
                name: "",
                title: "启动广告",
                ename: "startAdsComponent",
                icon: "iconfont icon-a-19-01",
                main: {
                    isEnable: true, //广告状态：true启用, false不启用
                    adStyle: 3, //广告样式，1全屏，2，中下关闭，3右上关闭
                    timedOff: 3, //定时关闭:0关闭，3,3秒，5,5秒，10,10秒，15,15秒
                    showCloseBtn: true, //关闭按钮，true,显示，false,不显示
                    bgColor: "#000000", //背景颜色
                    bgOpacity: 50, //背景默认透明度
                    setDisplay: 1, //显示设置：1.每次显示；2.间隔时间显示
                    timeInterval: 1, //时间间隔，1分钟
                    displayLogo: false, //是否显示logo
                    list: [
                        {
                            id: 1,
                            imgUrl: adsImg,
                            linkUrl: "",
                            linkName: "",
                        },
                    ],
                },
                right: [
                    {
                        id: 1,
                        name: "组件状态",
                        direction: "column",
                        open: true,
                        catalog: [
                            {
                                id: "1-1",
                                name: "",
                                title: "广告状态：",
                                display: "block",
                                ename: "isEnable",
                                value: true,
                                default: true,
                                controlName: "radioComponent",
                                options: [
                                    {
                                        id: true,
                                        name: "启用",
                                        value: true,
                                    },
                                    {
                                        id: false,
                                        name: "不启用",
                                        value: false,
                                    },
                                ],
                            },
                        ],
                    },
                    {
                        id: 2,
                        name: "组件样式",
                        direction: "column",
                        open: true,
                        catalog: [
                            {
                                id: "2-1",
                                name: "",
                                ename: "adStyle",
                                title: "广告样式：",
                                display: "block",
                                value: 2,
                                default: 2,
                                controlName: "radioGroupComponent",
                                options: [
                                    {
                                        id: 1,
                                        name: "全屏",
                                        icon: "iconfont icon-pinzhitubiaozu-7",
                                        value: 1,
                                    },
                                    {
                                        id: 2,
                                        name: "弹窗1",
                                        icon: "iconfont icon-shoujihao1",
                                        value: 2,
                                    },
                                    {
                                        id: 3,
                                        name: "弹窗2",
                                        icon: "iconfont icon-shoujihao1",
                                        value: 3,
                                    },
                                ],
                            },
                            {
                                id: "2-2",
                                name: "",
                                title: "定时关闭：",
                                display: "block",
                                ename: "timedOff",
                                value: 3,
                                default: 3,
                                controlName: "radioComponent",
                                options: [
                                    { id: 0, name: "关闭", value: 0 },
                                    { id: 3, name: "3秒", value: 3 },
                                    { id: 5, name: "5秒", value: 5 },
                                    { id: 10, name: "10秒", value: 10 },
                                    { id: 15, name: "15秒", value: 15 },
                                ],
                            },
                            {
                                id: "2-3",
                                name: "",
                                ename: "showCloseBtn",
                                title: "关闭按钮：",
                                display: "block",
                                controlName: "radioComponent",
                                default: true,
                                value: true,
                                options: [
                                    { id: false, name: "关闭", value: false },
                                    { id: true, name: "开启", value: true },
                                ],
                            },
                            {
                                id: "2-4",
                                name: "",
                                ename: "bgColor",
                                title: "背景颜色：",
                                display: "block",
                                controlName: "colorComponent",
                                default: "#000000",
                                value: "#000000",
                            },
                            {
                                id: "2-5",
                                title: "背景透明度：",
                                display: "block",
                                name: "",
                                ename: "bgOpacity",
                                min: 0,
                                max: 100,
                                step: 1,
                                controlName: "sliderComponent",
                                default: 50,
                                value: 50,
                                suffix: "%",
                            },
                        ],
                    },
                    {
                        id: 3,
                        name: "其它设置",
                        direction: "column",
                        open: true,
                        catalog: [
                            {
                                id: "3-1",
                                name: "",
                                ename: "setDisplay",
                                title: "显示设置：",
                                display: "block",
                                controlName: "radioComponent",
                                default: 1,
                                value: 1,
                                options: [
                                    { id: 1, name: "每次显示", value: 1 },
                                    { id: 2, name: "间隔时间显示", value: 2 },
                                ],
                            },
                            {
                                id: "3-2",
                                title: "时间间隔：",
                                display: "block",
                                name: "",
                                ename: "timeInterval",
                                min: 1,
                                max: 240,
                                step: 1,
                                controlName: "sliderComponent",
                                default: 1,
                                value: 1,
                                suffix: "分钟",
                            },
                            {
                                id: "3-3",
                                name: "",
                                ename: "displayLogo",
                                title: "显示Logo：",
                                display: "block",
                                controlName: "radioComponent",
                                default: false,
                                value: false,
                                options: [
                                    { id: true, name: "显示", value: true },
                                    { id: false, name: "不显示", value: false },
                                ],
                            },
                        ],
                    },
                    {
                        id: 4,
                        name: "内容",
                        direction: "column",
                        open: true,
                        catalog: [
                            {
                                id: "4-1",
                                name: "",
                                ename: "list",
                                title: "",
                                display: "block",
                                controlName: "",
                                list: [
                                    {
                                        id: 1,
                                        imgUrl: adsImg,
                                        default: adsImg,
                                        linkUrl: "",
                                        linkName: "",
                                    },
                                ],
                            },
                        ],
                    },
                ],
            },
            pageId: 39, //此id不可删除
            pageKey: "startAdsComponents",
            pageContent: "",
            loading: false,
        };
    },
    props: [],
    components: {
        StartAdsMainComponent: () => import("./startAdsMainComponent.vue"),
        StartAdsRightComponent: () => import("./startAdsRightComponent.vue"),
    },
    created() {},
    mounted() {
        this.$nextTick(() => {
            if (this.$route.params.pageId) {
                //console.log("编辑启动广告，id：", this.$route.params.pageId);
                this.pageId = this.$route.params.pageId;
                // this.getComponentInfo();
            }
        });
    },
    methods: {
        //查询组件详情信息
        getComponentInfo() {
            if (getToken()) {
                this.loading = true;
                this.axios
                    .get(`${headApi}/appPageContent/${this.pageId}`, {
                        headers: { Authorization: "Bearer " + getToken() },
                    })
                    .then((res) => {
                        //console.log(res);
                        this.loading = false;
                        if (res && res.data) {
                            let { code, data, msg } = res.data;
                            if (code == 200) {
                                if (data) {
                                    this.setControlInfo(JSON.parse(data.pageContent));
                                }
                            } else {
                                this.$message.warning(msg);
                            }
                        } else {
                            this.$message.warning("接口请求失败");
                        }
                    })
                    .catch((err) => {
                        this.loading = false;
                        console.log(err);
                    });
            }
        },
        //编辑时，查到了组件信息，这里将其回写到各组件内部
        setControlInfo(d) {
            //console.log(d);
        },
        //保存启动广告
        saveBottomMenu() {
            //拿到原始配置完毕的数据
            let d = this.$refs.right.control;
            if (!d.title) {
                this.$message.warning("请输入菜单名称");
                return false;
            }
            //逐一做合法性校验，通过后执行保存，否则提示相应需要调整的内容提示
            if (d.iconStyle === 0) {
                //若底部按钮，采用图标+文字形式展现
                const list = d.iconContent;
                let text = "";
                for (let i = 0; i < list.length; i++) {
                    if (list[i].icon == "" && list[i].name == "") {
                        text =
                            "在第" +
                            (i + 1) +
                            "个底部按钮处，请上传图标或填写按钮文字";
                        break;
                    }
                    if (list[i].linkUrl == "" && list[i].linkName == "") {
                        text =
                            "在第" + (i + 1) + "个底部按钮处，请选择点击链接";
                        break;
                    }
                }
                if (text) {
                    this.$message.warning(text);
                    return false;
                }
            } else if (d.iconStyle === 1) {
                //若底部按钮，采用存图标形式展现
                const list = d.imgContent;
                let text = "";
                for (let i = 0; i < list.length; i++) {
                    if (list[i].img == "") {
                        text =
                            "在第" + (i + 1) + "个底部按钮处，请上传默认图片";
                        break;
                    }
                    if (list[i].activeImg == "") {
                        text =
                            "在第" +
                            (i + 1) +
                            "个底部按钮处，请上传选中状态时的图片";
                        break;
                    }
                    if (list[i].linkUrl == "" && list[i].linkName == "") {
                        text =
                            "在第" + (i + 1) + "个底部按钮处，请选择点击链接";
                        break;
                    }
                }
                if (text) {
                    this.$message.warning(text);
                    return false;
                }
            }
            // this.pageKey = d.ename+(new Date().getTime());
            this.pageContent = JSON.stringify(d);
            this.pageName = d.title;
            //数据校验完毕，可以保存
            this.saveHandle();
        },
        saveHandle() {
            let params = new Object();
            params.pageKey = this.pageKey;
            params.pageContent = this.pageContent;
            params.pageName = this.pageName;
            params.pageType = 8; ////0 自定义页面 1 个性化页面 2 固定页面 3 登录页面  4 自定义表单  5底部导航按钮  6 固定主题色  7 登录主题  8启动广告
            params.tenantId = localStorage.getItem("tenantId");
            if (this.pageId) {
                params.id = this.pageId;
                this.saveEdit(params);
            } else {
                this.saveNewAdd(params);
            }
        },
        //保存新增
        saveNewAdd(params) {
            this.loading = true;
            if (getToken()) {
                this.axios
                    .post(`${headApi}/appPageContent`, params, {
                        headers: { Authorization: "Bearer " + getToken() },
                    })
                    .then((res) => {
                        this.loading = false;
                        //console.log(res);
                        if (res && res.data) {
                            let { code, data, msg } = res.data;
                            if (code == 200) {
                                this.$message.success("保存成功");
                                
                                //去到启动广告列表页
                                setTimeout(() => {
                                    this.$router.push({
                                        name: "decorateSet",
                                        params: { name: "reload" },
                                    });
                                }, 1500);
                            } else {
                                this.$message.warning(msg);
                            }
                        } else {
                            this.$message.warning("接口请求失败");
                        }
                    })
                    .catch((err) => {
                        this.loading = false;
                        console.log(err);
                    });
            }
        },
        //保存编辑
        saveEdit(params) {
            this.loading = true;
            if (getToken()) {
                this.axios
                    .put(`${headApi}/appPageContent`, params, {
                        headers: { Authorization: "Bearer " + getToken() },
                    })
                    .then((res) => {
                        this.loading = false;
                        //console.log(res);
                        if (res && res.data) {
                            let { code, data, msg } = res.data;
                            if (code == 200) {
                                this.$message.success("保存成功");
                                localStorage.setItem(
                                    "decorateSetActiveName",
                                    "bottomFormwork"
                                );
                                setTimeout(() => {
                                    this.$router.push({
                                        name: "decorateSet",
                                        params: { name: "reload" },
                                    });
                                }, 1500);
                                //去到启动广告列表页
                            } else {
                                this.$message.warning(msg);
                            }
                        } else {
                            this.$message.warning("接口请求失败");
                        }
                    })
                    .catch((err) => {
                        this.loading = false;
                        console.log(err);
                    });
            }
        },

        back() {
            this.$router.go(-1);
        },
    },
    computed: {},
    watch: {},
};
</script>

<style scoped lang="scss">
.startAds {
    background-color: #f4f6f8;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;

    .navHead {
        width: 100%;
        height: 60px;
        background-color: #333;
        justify-content: space-between;
        display: flex;
        align-items: center;

        .left,
        .right {
            display: flex;
            height: 100%;
            align-items: center;
        }

        a {
            height: 100%;
            display: flex;
            padding: 0 15px;
            font-size: 14px;
            color: #fff;
            align-items: center;

            &:hover,
            &.on {
                background-color: #000;
            }

            i {
                margin-right: 2px;
            }

            &.release {
                min-width: 80px;
                margin-left: 15px;
                height: 32px;
                background-color: #5d60f6;
                border-radius: 2px;
                display: flex;
                align-items: center;
                margin-right: 10px;
            }
        }
    }

    .body {
        width: 100%;
        min-width: 1400px;
        height: calc(100% - 60px);
        position: relative;

        .main {
            background-color: #fff;
            width: 375px;
            margin: 0 auto;
            height: 731px;
            display: flex;
            flex-direction: column;
            height: -webkit-fit-content;
            height: -moz-fit-content;
            height: fit-content;
            -ms-flex-negative: 0;
            flex-shrink: 0;
            margin: 40px auto 20px;
            border-radius: 2px;
            -webkit-box-shadow: 0px 4px 14px rgba(133, 148, 162, 0.2);
            box-shadow: 0px 4px 14px rgba(133, 148, 162, 0.2);
            position: relative;
            z-index: 1;

            .head {
                width: 100%;
                height: 64px;
                position: relative;

                .head_black_r {
                    position: absolute;
                    right: 7px;
                    width: 87px;
                    height: 32px;
                    bottom: 6px;
                }

                .title {
                    position: absolute;
                    z-index: 100;
                    font-family: "PingFang SC";
                    font-style: normal;
                    font-weight: 600;
                    font-size: 18px;
                    line-height: 25px;
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: flex;
                    -webkit-box-align: center;
                    -ms-flex-align: center;
                    align-items: center;
                    text-align: center;
                    color: #212121;
                    left: 50%;
                    -webkit-transform: translate(-50%, 0);
                    transform: translate(-50%, 0);
                    bottom: 10px;
                }
            }

            .section {
                width: 100%;
                height: 667px;
                position: relative;
                overflow: hidden;

                img {
                    width: 100%;
                    height: auto;
                    display: block;
                }
            }

            .foot {
                width: 100%;
                height: 50px;
            }
        }

        .right {
            width: 500px;
            position: absolute;
            right: 0;
            background-color: #fff;
            top: 0;
            z-index: 2;
            height: 100%;
            .head {
                height: 50px;
                width: 100%;
                border-bottom: 1px solid #e8eaec;
                box-sizing: border-box;
                padding-left: 15px;
                display: flex;
                align-items: center;
                i {
                    opacity: 0.8;
                    font-size: 18px;
                    margin-right: 5px;
                    color: #5d60f6;
                }
                span {
                    font-size: 16px;
                }
            }
            .article {
                height: calc(100% - 50px);
                overflow-y: auto;
                padding-right: 10px;
                box-sizing: border-box;
            }
        }
    }
}
</style>
